<template>
  <div class="app-container">
    <!-- Header 区域 -->
    <my-header title="购物车案例"></my-header>

    <!-- 商品 Item 项组件 -->
    <my-goods 
    v-for="item in cart"
    :key="item.id"
      :id="item.id" 
      :title="'item.good_name'" 
      :thumb="item.goods_img" 
      :price="item.goods_price" 
      :count="item.goods_count" 
      :state="item.goods_state"
      @stateChange="getState" 
      @countChange="getCount"></my-goods>

    <!-- Foote 区域 -->
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from './views/MyHeader.vue'
import MyGoods from './views/MyGoods.vue'
import MyFooter from './views/MyFooter.vue'

// 拿到vuex数据
import {mapState,mapActions} from 'vuex'
export default {
    components:{
        MyHeader,
        MyGoods,
        MyFooter
    },
    computed:{
        ...mapState('shopcar',['cart'])
    },
    methods:{
        ...mapActions('shopcar',['getCartList']),
        // 改变单个状态
        getState(val){
            this.$store.commit('shopcar/updateCartState',val)
        },
        // 改变单个的数量值
        getCount(val){
               this.$store.commit('shopcar/updateCartCount',val)
        }
    },
    created(){
            // 加载完成时调用vuex中的获取数据的方法
            this.getCartList()
    }

}
</script>

<style lang="less" scoped>
.app-container {
  padding: 46px 0 50px 0;
}
</style>